import { View, Text, Image, ScrollView, Swiper, SwiperItem } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { useState } from 'react'
import TabBar from '../../components/TabBar'
import './index.css'

const bannerList = [
  'https://images.unsplash.com/photo-1504674900247-0877df9cc836',
  'https://images.unsplash.com/photo-1506744038136-46273834b3fb',
  'https://images.unsplash.com/photo-1519864600265-abb23847ef2c',
]

const gridList = [
  { title: '肉类多样 健康食尚', btn: '立即抢购', bg: '#fff5f2' },
  { title: '好牛好生活', btn: '立即抢购', bg: '#fff9ed' },
  { title: '品质牛 牛品质', btn: '立即抢购', bg: '#f3f8ff', img: 'https://images.unsplash.com/photo-1519864600265-abb23847ef2c' },
  { title: '', btn: '', img: 'https://images.unsplash.com/photo-1519864600265-abb23847ef2c' },
]

const tabs = [
  { key: 'all', label: '全部' },
  { key: 'recommend', label: '店长力荐' },
  { key: 'hot', label: '热销专区' },
  { key: 'gift', label: '礼盒定制' },
  { key: 'import', label: '进口牛肉' },
  { key: 'snack', label: '休闲零食' },
  { key: 'fresh', label: '新鲜蔬果' },
]

const allProducts = [
  {
    id: 1,
    img: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
    title: '散装牛千巴啵啵6个，散装牛千巴啵啵6个，散装牛千巴啵啵6个',
    tag: '新品上市 | 限购1件',
    price: 98.6,
    oldPrice: 128.0,
    btn: '加入购物车',
  },
  {
    id: 2,
    img: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
    title: '散装牛千巴啵啵6个月',
    tag: '新品上市 | 限购1件',
    price: 98.6,
    oldPrice: 128.0,
    btn: '加入购物车',
  },
  {
    id: 3,
    img: 'https://images.unsplash.com/photo-1519864600265-abb23847ef2c',
    title: '进口牛肉礼盒装',
    tag: '进口牛肉 | 礼盒',
    price: 188.0,
    oldPrice: 228.0,
    btn: '加入购物车',
  },
]

const recommendProducts = [
  {
    id: 4,
    img: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb',
    title: '店长推荐澳洲牛排',
    tag: '限时特惠',
    price: 158.0,
    oldPrice: 199.0,
    btn: '加入购物车',
  },
  {
    id: 5,
    img: 'https://images.unsplash.com/photo-1519864600265-abb23847ef2c',
    title: '店长推荐进口牛肉',
    tag: '进口牛肉',
    price: 208.0,
    oldPrice: 258.0,
    btn: '加入购物车',
  },
]

const hotProducts = [
  {
    id: 6,
    img: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
    title: '热销牛肉干',
    tag: '热销爆款',
    price: 68.0,
    oldPrice: 88.0,
    btn: '加入购物车',
  },
  {
    id: 7,
    img: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb',
    title: '热销牛排套餐',
    tag: '热销爆款',
    price: 128.0,
    oldPrice: 168.0,
    btn: '加入购物车',
  },
]

const giftProducts = [
  {
    id: 8,
    img: 'https://images.unsplash.com/photo-1519864600265-abb23847ef2c',
    title: '牛肉礼盒定制',
    tag: '礼盒定制',
    price: 288.0,
    oldPrice: 328.0,
    btn: '加入购物车',
  },
]

const importProducts = [
  {
    id: 9,
    img: 'https://images.unsplash.com/photo-1504674900247-0877df9cc836',
    title: '进口牛肉精选',
    tag: '进口牛肉',
    price: 218.0,
    oldPrice: 268.0,
    btn: '加入购物车',
  },
]

const snackProducts = [
  {
    id: 10,
    img: 'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
    title: '牛肉干零食',
    tag: '休闲零食',
    price: 38.0,
    oldPrice: 48.0,
    btn: '加入购物车',
  },
]

const freshProducts = [
  {
    id: 11,
    img: 'https://images.unsplash.com/photo-1519864600265-abb23847ef2c',
    title: '新鲜蔬果组合',
    tag: '新鲜蔬果',
    price: 58.0,
    oldPrice: 78.0,
    btn: '加入购物车',
  },
]

const tabProductMap = {
  all: allProducts,
  recommend: recommendProducts,
  hot: hotProducts,
  gift: giftProducts,
  import: importProducts,
  snack: snackProducts,
  fresh: freshProducts,
}

export default function Buy() {
  const [bannerCurrent, setBannerCurrent] = useState(0)
  const [activeTab, setActiveTab] = useState('recommend')
  const productList = tabProductMap[activeTab]

  useLoad(() => {
    console.log('Buy page loaded.')
  })

  return (
    <View className='buy-container'>
      {/* 顶部导航栏 */}
      <View className='buy-navbar'>
        <View className='buy-navbar-back'>&lt;</View>
        <Text className='buy-navbar-title'>优选</Text>
        <View className='buy-navbar-icons'>
          <View className='buy-navbar-dot'></View>
          <View className='buy-navbar-more'>···</View>
          <View className='buy-navbar-round'></View>
        </View>
      </View>
      {/* Banner轮播 */}
      <View className='buy-banner'>
        <Swiper
          className='buy-banner-swiper'
          indicatorColor='#fff'
          indicatorActiveColor='#ff2d2d'
          circular
          autoplay
          current={bannerCurrent}
          onChange={e => setBannerCurrent(e.detail.current)}
        >
          {bannerList.map((img, idx) => (
            <SwiperItem key={img}>
              <Image className='buy-banner-img' src={img} />
            </SwiperItem>
          ))}
        </Swiper>
        <View className='buy-banner-dots'>
          {bannerList.map((_, idx) => (
            <View key={idx} className={`buy-banner-dot${bannerCurrent === idx ? ' active' : ''}`}></View>
          ))}
        </View>
      </View>
      {/* 2x2宫格卡片 */}
      <View className='buy-grid'>
        <View className='buy-grid-row'>
          <View className='buy-grid-card' style={{ background: gridList[0].bg }}>
            <Text className='buy-grid-title'>{gridList[0].title}</Text>
            <View className='buy-grid-btn'>{gridList[0].btn}</View>
          </View>
          <View className='buy-grid-card' style={{ background: gridList[1].bg }}>
            <Text className='buy-grid-title'>{gridList[1].title}</Text>
            <View className='buy-grid-btn'>{gridList[1].btn}</View>
          </View>
        </View>
        <View className='buy-grid-row'>
          <View className='buy-grid-card buy-grid-card-img'>
            <Image className='buy-grid-img' src='https://images.unsplash.com/photo-1519864600265-abb23847ef2c' />
          </View>
          <View className='buy-grid-card buy-grid-card-img'>
            <Image className='buy-grid-img' src='https://images.unsplash.com/photo-1519864600265-abb23847ef2c' />
          </View>
        </View>
      </View>
      {/* 横向tab筛选 */}
      <View className='buy-tabs'>
        {tabs.slice(0, 5).map(tab => (
          <View
            className={`buy-tab${activeTab === tab.key ? ' active' : ''}`}
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
          >
            {tab.label}
          </View>
        ))}
      </View>
      {/* 商品列表卡片 */}
      <View className='buy-product-list'>
        {productList.map(item => (
          <View className='buy-product-card' key={item.id}>
            <Image className='buy-product-img' src={item.img} />
            <View className='buy-product-info'>
              <Text className='buy-product-title'>{item.title}</Text>
              <View className='buy-product-tag'>{item.tag}</View>
              <View className='buy-product-bottom'>
                <View className='buy-product-price'>￥{item.price} <Text className='buy-product-oldprice'>￥{item.oldPrice}</Text></View>
                <View className='buy-product-btn'>{item.btn}</View>
              </View>
            </View>
          </View>
        ))}
      </View>
      <TabBar />
    </View>
  )
}
